<template>
    <div class="add-room">
        <h2 class="title">创建一间房间</h2>
        <a-form class="form" layout="horizontal" :model="state.room" v-bind="{labelCol: { span: 4 },wrapperCol: { span: 14 },}">
            <a-form-item label="房间类型:">
                <a-select
                    v-model:value="state.room.type"
                    style="width: 100%"
                >
                    <a-select-option v-for="type in $store.state.room.type" :key="type.id" :value="type.id">
                        {{type.typeName}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="房间号">
                <a-input v-model:value="state.room.roomNumber" placeholder="请输入房间号" />
            </a-form-item>
            <a-form-item label="房间楼层">
                 <a-select
                    v-model:value="state.room.floor"
                    style="width: 100%"
                    >
                    <a-select-option v-for="floor of 5" :key="floor" :value="floor">
                        第{{floor}}楼
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="初始房间状态">
                 <a-select
                    v-model:value="state.room.status"
                    style="width: 100%"
                    >
                    <a-select-option v-for="status of $store.state.room.status" :key="status.status" :value="status.status">
                        {{status.name}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="房间入住价格">
                <a-input-number v-model:value="state.room.price" :min="0" :step="10" placeholder="价格" style="width: 100%" />
            </a-form-item>
            <a-form-item label="房间封面图片">
                <a-input v-model:value="state.room.cover" placeholder="封面图片" />
            </a-form-item>
            <a-form-item label="房间描述">
                <a-textarea
                    v-model:value="state.room.description"
                    placeholder="房间描述"
                    allow-clear />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" block @click="submitRoom">
                    Submit
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
import { reactive } from 'vue'
import { getInstance } from '../utils/request'
import { message } from 'ant-design-vue'
export default {
    name: "addRoom",
    setup(){
        const state = reactive({
            room: {
                type: "",
                roomNumber: "",
                floor: 1,
                status: 0,
                price: 0,
                cover: "",
                description: ""
            }
        })
        
        const submitRoom = async () => {
            let room = state.room;
            if(room.type !== "" && room.roomNumber != "" && room.cover !== "" && room.description !== ""){
                let token = localStorage.getItem("token");
                let res = await getInstance(token).post("/room", room);
                if(res.code === 0){
                    message.success("创建房间成功.")
                }else{
                    message.error("创建房间失败")
                }
            }else{
                message.warn("您的信息填写不完善。")
            }
        }

        return {
            state,
            submitRoom
        }
    }
}
</script>

<style lang="scss">
@import "../assets/styles/pages/addRoom.scss";
</style>